<template>
<div>
  <Scroll ref="scroll" class="oriderDetails">
    <div slot="body">
      <!-- eslint-disable max-len -->
      <div
        :class="{
        'goods-state': true,
        [statusFilter(orderStatus, 'className')]: true
      }">
        <span v-if="+orderStatus === 11 && +orderDetail.examineStatus === 1" class="status">转卖被驳回</span>
        <span v-if="!(+orderStatus === 11 && +orderDetail.examineStatus === 1)" class="status">{{statusFilter(orderStatus, "name")}}</span>
        <span v-if="orderStatus === 8">请耐心等待平台发货</span>
        <span v-if="+orderStatus === 11 && +orderDetail.examineStatus === 0">平台审核中</span>
        <span v-if="+orderStatus === 11 && +orderDetail.examineStatus === 1">{{orderDetail.examineContent}}</span>
        <span  v-if="+orderStatus === 1 || +orderStatus === 4 || +orderStatus === 9" class="time">
          <CountDown
            intervalId="orderDetails"
            :totalSeconds="orderDetail.timeDiffent || 1"
            :timeType="+orderStatus === 9 ? 2 : 1"
            @endTime="endTime(orderStatus)"
          >
          <span slot="first">请在</span>
          <span v-if="+orderStatus === 4">内完成支付，超时定金不退</span>
          <span v-if="+orderStatus === 1">内完成支付，超时将取消订单</span>
          <span v-if="+orderStatus === 9">内完成确认收货，超时将自动确认收货</span>
          </CountDown>
        </span>
      </div>
      <div class="address oriderBox" v-if="orderDetail.address">
        <div class="position"></div>
        <div class="info">
          <div class="name-mobile">
            <span>{{orderDetail.peopName}}</span>
            <span>{{orderDetail.tel}}</span>
          </div>
          <div class="address-info">
            <span>地址：{{orderDetail.address}}</span>
          </div>
        </div>
        <div class="arrow">
          <i class="icon-arrow"></i>
        </div>
      </div>
      <div class="goods-info oriderBox">
        <div class="pic">
          <img class="picItem" :src="orderDetail.thumbnail | ImgFilter" alt="Img">
        </div>
        <div class="info">
          <div>
            <div class="title">
              <span>{{orderDetail.productName}}</span>
            </div>
            <div class="sku">
              <span>{{orderDetail.specifications}}</span>
            </div>
            <div class="money">
              <span>￥{{orderDetail.price | pointFilter}}</span>
            </div>
          </div>
          <div class="buyNumber"><span>x{{orderDetail.counts}}</span></div>
        </div>
      </div>
      <div class="step-one stage oriderBox">
        <h5>阶段1
          <span v-if="orderDetail.status === 1">待付款</span>
          <span  v-if="orderDetail.status != 1 && orderDetail.status != 2">已完成</span>
          <span v-if="orderDetail.status === 2">已关闭</span>
        </h5>
        <div class="list-item">
          <span>商品定金</span>
          <span>￥{{orderDetail.onePrice | pointFilter}}</span>
        </div>
        <div class="list-item" v-if="orderDetail.status === 1 || orderDetail.status === 2">
          <span>需付定金</span>
          <span>￥{{orderDetail.onePrice | pointFilter}}</span>
        </div>
        <div class="list-item" v-else>
          <span>已付定金</span>
          <span>￥{{orderDetail.onePrice | pointFilter}}</span>
        </div>
      </div>
      <div class="stage oriderBox">
        <h5>阶段2
          <span v-if="orderDetail.status === 1">未开始</span>
          <span v-if="orderDetail.status === 3 || orderDetail.status === 4">待付款</span>
          <span  v-if="orderDetail.status !== 1 && orderDetail.status != 2 && orderDetail.status != 3 && orderDetail.status != 4 && orderDetail.status != 12">已完成</span>
          <span v-if="orderDetail.status === 2 || orderDetail.status === 12">已关闭</span>
        </h5>
        <div class="list-item">
          <span>商品尾款</span>
          <span>￥{{orderDetail.tailMoney | pointFilter}}</span>
        </div>
        <div class="list-item">
          <span>商品运费</span>
          <span>￥{{orderDetail.postage | pointFilter}}</span>
        </div>
        <div class="list-item" v-if="orderDetail.isGuess == 1">
          <span>折扣</span>
          <span>-￥{{orderDetail.tailMoney + +orderDetail.postage}}</span>
        </div>
        <div class="list-item" v-if="orderDetail.isGuess == 1">
          <span>需付款</span>
          <span>￥0.00</span>
        </div>
        <div class="list-item" v-if="!(orderDetail.isGuess == 1)">
          <span>需付尾款+运费</span>
          <span>￥{{((+orderDetail.tailMoney || 0) + (+orderDetail.postage || 0)) | pointFilter}}</span>
        </div>
      </div>

      <div class="forecast oriderBox">
        <div class="list-item">
          <span>我的预测码：{{orderDetail.nums}}</span>
          <span class="color-blue" v-if="+orderDetail.status === 1 || +orderDetail.status === 3">若预测成功，尾款全免</span>
          <span :class="[orderDetail.isGuess === 0 ? 'text-success' : 'text-error']" v-else-if="+orderDetail.status !== 2">{{orderDetail.isGuess === 1 ? "预测成功" : "预测失败"}}</span>
        </div>
        <template v-if="+orderDetail.status != 2">
          <div class="list-item">
            <div class="reverse-box">
              <span>本场免尾款码：</span>
              <span v-if="+orderDetail.status != 3 && orderDetail.status === 1">将在定金支付后公布</span>
              <span class="reverse" v-else>
                <em v-for="(item, index) in openNumsArr" :class="[item === numsArr[index] && orderDetail.isGuess == 1 ? 'text-red' : 'text-default' ]" :key="index">
                  {{item}}
                </em>
              </span>
              <span class="time" v-if="+orderDetail.status === 3">
                <CountDown
                  intervalId="orderDetailsNums"
                  :totalSeconds="orderDetail.timeDiffent || 0"
                  :timeType="1"
                  @endTime="endTime(orderStatus)"
                >
                <span slot="first">将在</span>
                <span>后公布</span>
                </CountDown>
              </span>
              <span class="icon-code" @click="isPopup_codeExplain = !isPopup_codeExplain"></span>
            </div>
          </div>
          <div class="list-item">
            <div v-if="+orderDetail.status !== 3">
              <span>免尾款场次：</span>
              <span v-if="+orderDetail.status === 1">将在定金支付后确定</span>
              <span v-if="+orderDetail.status != 1 || +orderDetail.status != 2">{{orderDetail.expect}}</span>
            </div>
          </div>
        </template>
        <!-- <div class="list-item">
          <span>折扣场次：将在定金支付后确定</span>
        </div> -->
      </div>
      <div class="orider-info forecast oriderBox">
        <div class="time list-item">
          <span>下单时间：{{orderDetail.createAt | converDate(2)}}</span>
        </div>
        <div class="serial-num list-item">
          <span>订单编号：{{orderDetail.orderNum}}</span>
        </div>
        <div class="serial-num list-item" v-if="orderDetail.orderTime">
          <span>定金付款: {{orderDetail.orderTime | converDate(2)}}</span>
        </div>
        <template v-if="orderDetail.logisticsCompany">
          <div class="time list-item">
            <span>物流公司：{{orderDetail.logisticsCompany}}</span>
          </div>
          <div class="serial-num list-item">
            <span>物流单号：{{orderDetail.logisticsNum}}</span>
          </div>
        </template>
      </div>
      <!-- <div class="orider-money oriderBox">
        <div class="freight flexBox">
          <span>运费</span>
          <span>￥{{orderDetail.postage | pointFilter}}</span>
        </div>
        <div class="money flexBox">
          <span>订单金额</span>
          <span>￥{{(+orderDetail.postage + +orderDetail.price) | pointFilter}}</span>
        </div>
      </div> -->
    </div>
  </Scroll>
  <div class="footer" :class="{'iPhonex': isIphonex}" ref="fixedBoxBuy" v-if="!(+orderDetail.status === 2 || +orderDetail.status === 12 || +orderDetail.status === 8 || +orderDetail.status === 10 || +orderDetail.status === 5)">
    <button v-if="+orderDetail.status === 1" @click="handleCancelOrder" class="btn btn-default">取消订单</button>
    <button v-if="+orderDetail.status === 7" @click="handleResell" class="btn btn-default">一键转卖</button>
    <button v-if="+orderDetail.status === 11" @click="handleCancelResell" :class="['btn', +orderDetail.status === 11 && +orderDetail.examineStatus === 0 ? 'btn-pink'  : 'btn-default']">取消转卖</button>
    <button v-if="+orderDetail.status === 11 && +orderDetail.examineStatus === 1" @click="handleResell" class="btn btn-pink">再次申请</button>
    <button @click="handleAllStatus" v-if="!(+orderDetail.status === 11 && (+orderDetail.examineStatus === 1 || +orderDetail.examineStatus === 0))" :class="['btn', buttonFilter(orderDetail.status, 'className')]">{{buttonFilter(orderDetail.status, "name")}}</button>
    <!-- <button>支付定金</button> -->
    <!-- <button>查看转卖</button> -->
    <!-- <button>立即提货</button> -->
  </div>
  <Popups :isShow.sync="isPopup_resell" title="转卖商品">
      <div slot="body">
        <Scroll ref="scroll_resell" style="height: 5.2rem;">
        <div class="form-item">
          <label class="form-label">商品原价</label>
          <span class="text">{{orderDetail.price}}</span>
          <span>元</span>
        </div>
        <div class="form-item">
          <label class="form-label">转卖价格</label>
          <input type="number" v-model.number.trim="sellPrice" value="" class="form-input" placeholder="请输入转卖价格">
          <span>元</span>
        </div>
        <div class="form-item">
          <label class="form-label">最终售价</label>
          <span class="text">{{+sellPrice + +orderDetail.postage}}</span>
          <span>元</span>
        </div>
        <div class="tip">
          <span>提示：商品最终售价=转卖价+运费{{orderDetail.postage}}</span>
        </div>
        <div class="explain">
          <p class="tip" @click="handleExplain"><span class="icon-explain"></span>转卖说明<span class="icon-arrow"></span></p>
          <div class="text-box"> <!-- v-show="isExplainshow"-->
            <p class="txt">你在设置转卖价格后，此商品将会提交至优众转卖平台(resell.ihaveu.com)进行审核，审核通过后将在转卖首页进行转卖，转卖成功后款项将打至您的集分竞宝APP钱包中。</p>
            <p class="href" @click="goOther(1)">去优众转卖平台</p>
            <p class="href" @click="goOther(2)">下载集分竞宝APP</p>
          </div>
        </div>
        </Scroll>
      </div>
      <button class="edit-sub" @click="resellPro" slot="footer">确定</button>
    </Popups>
    <Popups :isShow.sync="isPopup_confirmMoney" title="确认收货">
      <div  class="cancel-info" slot="body">
        <span>请确认您已收到商品</span>
      </div>
      <div slot="footer" class="pop-footer-btns">
        <button class="pop-footer-cancel" @click="isPopup_confirmMoney = false" >取消</button>
        <button class="pop-footer-sub" @click="handleConfirmMoney" >确定</button>
      </div>
    </Popups>
    <Popups :isShow.sync="isPopup_cancelOrder" title="取消订单">
      <div  class="cancel-info info-center" slot="body">
        <span>是否取消该订单？</span>
      </div>
      <div slot="footer" class="pop-footer-btns">
        <button class="pop-footer-cancel" @click="isPopup_cancelOrder = false" >再想想</button>
        <button class="pop-footer-sub" @click="cancelOrder">确定</button>
      </div>
    </Popups>
    <Popups :isShow.sync="isPopup_resellCancel" title="取消转卖">
      <div  class="cancel-info info-center" slot="body">
        <span>是否取消转卖该商品？</span>
      </div>
      <div slot="footer" class="pop-footer-btns">
        <button class="pop-footer-cancel" @click="isPopup_resellCancel = false" >再想想</button>
        <button class="pop-footer-sub" @click="resellCancel">确定</button>
      </div>
    </Popups>
    <Popups :isShow.sync="isPopup_codeExplain" title="免尾款码说明">
      <div  class="cancel-info txt-left" slot="body">
        <span>为维护用户权益，免尾款码取自重庆时时彩的同期开奖号码的百位、十位与个位数，确保公平公开公正</span>
      </div>
      <div slot="footer" class="pop-footer-btns">
        <button class="pop-footer-sub" @click="isPopup_codeExplain = !isPopup_codeExplain" >知道了</button>
      </div>
    </Popups>
    <Popups :isShow.sync="isPopup_paytail" title="提示">
      <div  class="cancel-info" slot="body">
        <span>您的预测结果未出炉，若预测成功将获得免尾款。您确定放弃免尾款机会？</span>
      </div>
      <div slot="footer" class="pop-footer-btns">
        <button class="pop-footer-cancel" @click="isPopup_resellCancel = false" >再想想</button>
        <button @click="handlePayment" class="pop-footer-sub" >确定</button>
      </div>
    </Popups>
  </div>
</template>

<script>
import Ajax from "@/mixins/ajax";
import href from "@/mixins/href";
import { Popups } from "~/popOut";
import { Scroll } from "~/vScroll";
import CountDown from "~/countDown";

// 获取订单详情
const getOrderDetailUrl = "/card-service-web/onePercent/orderDetail";
// 取消订单
const cancelOrderUrl = "/card-service-web/onePercent/cancelOrder";
// 支付宝支付接口
const alipayUrl = "/card-service-web/alipay/aliPayOnePercent";
// 提货接口
const onePayReSellUrl = "/card-service-web/onePercent/onePayReSell";
// 确认收货
const confirmGoodsOrdersUrl = "/card-service-web/onePercent/confirmGoodsOrders";
// 转卖接口
const resellUrl = "/card-service-web/resell/updateResellMall";
// 取消转卖
const resellCancelUrl = "/card-service-web/resell/cancelResell";

export default {
  name: "OrderDetails",
  mixins: [Ajax, href],
  components: {
    Scroll,
    CountDown,
    Popups
  },
  data() {
    const { id } = this.$route.params;
    return {
      orderId: id || 0,
      orderDetail: {},
      orderStatus: 0,
      // 转卖弹框
      isPopup_resell: false,
      // 确认收货弹框
      isPopup_confirmMoney: false,
      // 取消订单弹框
      isPopup_cancelOrder: false,
      // 取消转卖弹框
      isPopup_resellCancel: false,
      // 是否确认支付尾款
      isPopup_paytail: false,
      // 转卖价格
      sellPrice: 0,
      // 转卖说明显示隐藏
      isExplainshow: false,
      // 免尾款吗说明
      isPopup_codeExplain: false,
      // 开奖号码数组
      openNumsArr: [],
      // 自己的号码数组
      nums: [],
      // 是否为iPhone X
      isIphonex: false
    };
  },
  mounted() {
    this.iphoneType();
    this.getOrderDetail();
  },
  methods: {
    /**
     * 展开转卖说明
     */
    handleExplain() {
      this.isExplainshow = !this.isExplainshow;
      this.$nextTick(() => {
        this.$refs.scroll_resell.refresh();
      });
    },
    setWindowSize(status) {
      // 设置带底部bar
      const windowHeight = this.getHeight();
      /* eslint-disable */
      const headerEl = document.querySelector("#header");
      const fixedBoxBuy = this.$refs.fixedBoxBuy;
      const headerElHeight = this.getElHeight(headerEl);
      let fixedBoxBuyHeight = this.getElHeight(fixedBoxBuy);
      if (
        status === 2 ||
        status === 12 ||
        status === 8 ||
        status === 10 ||
        status === 5
      ) {
        fixedBoxBuyHeight = 0;
      }
      this.mainHeight = windowHeight - (headerElHeight + fixedBoxBuyHeight);
      // 更新IScroll尺寸
      this.$nextTick(() => {
        this.$refs.scroll.refresh();
      });
    },
    /**
     * 获取订单详情
     */
    getOrderDetail() {
      this.post(getOrderDetailUrl, {
        orderId: this.orderId
      }).then(body => {
        this.orderDetail = body.execData;
        this.orderStatus = body.execData.status;
        this.openNumsArr = this.orderDetail.openNums.split("").reverse();
        this.numsArr = this.orderDetail.nums.split("").reverse();
        this.setWindowSize(+body.execData.status);
      });
    },
    /**
     * 处理订单状态请求
     */
    handleAllStatus() {
      const {
        status,
        onePrice,
        tailMoney,
        postage,
        productName,
        orderId
      } = this.orderDetail;
      switch (+status) {
        case 1:
          // 支付定金
          this.alipay(onePrice);
          break;
        case 3:
          // 支付尾款
          // 是否确认支付尾款
          this.isPopup_paytail = true;
          break;
        case 4:
          // 支付尾款
          this.alipay(tailMoney + postage);
          break;
        case 7:
          // 立即提货
          this.post(onePayReSellUrl, {
            orderId
          }).then(body => {
            if (+body.execErrCode === 200) {
              this.getOrderDetail();
              const onePayReSellTip = {
                isPrompt: true,
                isCloseEl: true,
                isConfirm: true,
                title: "",
                info: "提货成功， 我们会尽快为您发货",
                isMaskDown: true,
                textAlign: "center"
              };
              this.$emit("onPrompt", onePayReSellTip);
            }
          });
          break;
        case 9:
          // 打开确认收货弹框
          this.isPopup_confirmMoney = true;
          break;
        case 11:
          // 查看转卖
          this.goOther(1);
          break;
        default:
          break;
      }
    },
    /**
     * 已支付订金付尾款
     */
    handlePayment() {
      // 尾款，运费
      const { tailMoney, postage } = this.orderDetail;
      this.alipay(tailMoney + postage);
    },
    /**
     * 一键转卖
     */
    handleResell() {
      this.sellPrice = this.orderDetail.price;
      this.isExplainshow = false;
      this.isPopup_resell = true;
      this.$nextTick(() => {
        this.$refs.scroll_resell.refresh();
      });
    },
    /**
     * 转卖
     */
    resellPro() {
      this.isPopup_resell = false;
      const { orderId } = this.orderDetail;
      this.post(resellUrl, {
        type: 3,
        id: orderId,
        price: parseInt(+this.sellPrice + +this.orderDetail.postage)
      }).then(body => {
        if (+body.execErrCode === 200) {
          this.getOrderDetail();
          const confirmGoodsOrdersTip = {
            isPrompt: true,
            isCloseEl: true,
            isConfirm: false,
            title: "",
            info: "转卖成功",
            isMaskDown: true,
            textAlign: "center"
          };
          this.$emit("onPrompt", confirmGoodsOrdersTip);
        }
      });
    },
    /**
     * 取消转卖
     */
    handleCancelResell() {
      this.isPopup_resellCancel = true;
    },
    resellCancel() {
      this.isPopup_resellCancel = false;
      const { orderId } = this.orderDetail;
      this.post(resellCancelUrl, {
        crazyId: orderId
      }).then(body => {
        if (+body.execErrCode === 200) {
          this.getOrderDetail();
          const confirmGoodsOrdersTip = {
            isPrompt: true,
            isCloseEl: true,
            isConfirm: false,
            title: "",
            info: "已取消转卖",
            isMaskDown: true,
            textAlign: "center"
          };
          this.$emit("onPrompt", confirmGoodsOrdersTip);
        }
      });
    },
    /**
     * 确认收货
     */
    handleConfirmMoney() {
      this.isPopup_confirmMoney = true;
      // 确认收货
      this.post(confirmGoodsOrdersUrl, {
        orderId
      }).then(body => {
        if (+body.execErrCode === 200) {
          this.getOrderDetail();
          const confirmGoodsOrdersTip = {
            isPrompt: true,
            isCloseEl: true,
            isConfirm: true,
            title: "",
            info: "收货成功",
            isMaskDown: true,
            textAlign: "center"
          };
          this.$emit("onPrompt", confirmGoodsOrdersTip);
        }
      });
    },    
    // 判断是否为iPhone X
    iphoneType () {
      var u = navigator.userAgent;
      if (!(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1)) {
       if(window.screen.height == 812) {
         this.isIphonex = true;
       }
      }
    },
    /**
     * 支付
     */
    alipay(totalAmout) {
      if(this.orderDetail.delayDate - Date.now() <= 0) {
        this.getOrderDetail();
        return;
      }
      totalAmout = this.point(totalAmout);
      const { productName, orderNum } = this.orderDetail;
      //console.log(orderId)
      const token = this.getToken();
      const href = `${alipayUrl}?body=${orderNum}&outTradeNo=${orderNum}&subject=${
        this.orderId
      }&totalAmout=${totalAmout}&returnUrl=${encodeURIComponent(
        `http://${
          window.location.host
        }/?newToken=${token}#/Payment?outTradeNo=${this.orderId}`
      )}`;

      this.openWith(href);
    },
    /**
     * 取消订单
     */
    handleCancelOrder() {
      this.isPopup_cancelOrder = true;
    },
    cancelOrder() {
      this.isPopup_cancelOrder = false;
      this.post(cancelOrderUrl, {
        orderId: this.orderDetail.orderId
      }).then(body => {
        if (+body.execErrCode === 200) {
          this.getOrderDetail();
          const cancelOrderTip = {
            isPrompt: true,
            isCloseEl: true,
            isConfirm: true,
            title: "",
            info: "成功取消订单",
            isMaskDown: true,
            textAlign: "center"
          };
          this.$emit("onPrompt", cancelOrderTip);
        }
      });
    },
    endTime(status) {
      /* eslint-disable */
      // this.orderStatus = 2;
      this.getOrderDetail();
    },
    /**
     * 进度过滤
     */
    statusProgressFilter(value) {
      let state = {
        // 当前进度值
        progress: "0%",
        // 当前进度步骤
        step: 1
      };
      switch (+value) {
        case 1:
          state = {
            progress: "0%",
            step: 1
          };
          break;
        case 3:
          state = {
            progress: "0%",
            step: 1
          };
          break;
        case 4:
          state = {
            progress: "33%",
            step: 2
          };
          break;
        case 5:
          state = {
            progress: "67%",
            step: 3
          };
          break;
        case 7:
          state = {
            progress: "100%",
            step: 4
          };
          break;
        default:
          state = {
            progress: "0%",
            step: 1
          };
          break;
      }
      return state;
    },
    /**
     * 去其他页面
     * 1： 转卖, 2: 下载集分竞宝
     */
    goOther(type) {
      let host = location.host;
      // 生产
      let href = "";
      if (host == "crazysale.zuanliantech.com") {
        if (type == 1) {
          href =
            "http://resell.ihaveu.com/?newToken=" + this.getToken() + "#/home";
        } else {
          href = "https://card-h5.zuanliantech.com/card/#/down";
        }

        // 测试
      } else {
        if (type == 1) {
          href =
            "http://d2.zuanliantech.com/?newToken=" +
            this.getToken() +
            "#/home";
        } else {
          href = "http://test-card.zuanliantech.com/card/#/down";
        }
      }
      this.goHref(href);
    },
    goHref(href) {
      const u = navigator.userAgent;
      if (navigator.userAgent.indexOf("jfjingbao") <= -1) {
        location.href = href;
      } else {
        // Android
        if (u.indexOf("Android") > -1 || u.indexOf("Adr") > -1) {
          window.Android.redirect(href);
          // ios
        } else {
          WebViewJavascriptBridge.openSafari(href);
        }
      }
    },
    buttonFilter(status, type) {
      let result = {};
      switch (+status) {
        case 1:
          result = {
            name: "支付定金",
            className: "btn-pink"
          };
          break;
        case 3:
          result = {
            name: "支付尾款",
            className: "btn-pink"
          };
          break;
        case 4:
          result = {
            name: "支付尾款",
            className: "btn-pink"
          };
          break;
        case 7:
          result = {
            name: "立即提货",
            className: "btn-pink"
          };
          break;
        case 9:
          result = {
            name: "确认收货",
            className: "btn-pink"
          };
          break;
        case 11:
          result = {
            name: "查看转卖",
            className: "btn-pink"
          };
          break;
        default:
          result = {
            name: "查看转卖",
            className: "btn-pink"
          };
          break;
      }
      return result[type];
    },
    statusFilter(value, type) {
      let state = {};
      switch (+value) {
        case 1:
          state = {
            name: "待付定金",
            className: "orderStatus-witing"
          };
          break;
        case 2:
          state = {
            name: "已取消",
            className: "orderStatus-cancel"
          };
          break;
        case 3:
          state = {
            name: "结果公布中",
            className: "orderStatus-witing"
          };
          break;
        case 4:
          state = {
            name: "待付尾款",
            className: "orderStatus-witing"
          };
          break;
        case 7:
          state = {
            name: "待提货",
            className: "orderStatus-witing"
          };
          break;
        case 8:
          state = {
            name: "待发货",
            className: "orderStatus-witing"
          };
          break;
        case 9:
          state = {
            name: "待收货",
            className: "orderStatus-witing"
          };
          break;
        case 10:
          state = {
            name: "已完成",
            className: "orderStatus-success"
          };
          break;
        case 11:
          state = {
            name: "转卖中",
            className: "orderStatus-witing"
          };
          break;
        case 12:
          state = {
            name: "已关闭",
            className: "orderStatus-cancel"
          };
          break;
        case 14:
          state = {
            name: "转卖成功",
            className: "orderStatus-witing"
          };
          break;
        default:
          state = {
            name: "",
            className: "orderStatus-witing"
          };
          break;
      }
      return state[type];
    }
  }
};
</script>
<style scoped>
.oriderDetails {
  width: 100%;
  background: #f5f5f4;
}
.oriderBox {
  background: #fff;
  margin-bottom: 0.45rem;
}
.goods-state {
  display: flex;
  flex-direction: column;
  padding: 0.54rem 0.46rem 0.54rem 0.46rem;
  font-size: 0.36rem;
  color: #fff;
  background: #b71358;
  line-height: 0.68rem;
}
.closeOrder {
  text-align: center;
}
.goods-state .status {
  font-size: 0.48rem;
}
.address {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.45rem 0.48rem 0.46rem 0.58rem;
}
.address .position {
  width: 0.51rem;
  height: 0.7rem;
  background: url("../../assets/img/position.png") no-repeat;
  background-size: 100%;
  margin-right: 0.41rem;
}
.address .info {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.address .info .name-mobile {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 0.54rem;
  font-size: 0.48rem;
}
.address .info .address-info {
  font-size: 0.42rem;
  color: #8e8e8e;
}
.address .arrow {
  margin-left: 0.37rem;
}
.address .arrow .icon-arrow {
  display: inline-block;
  width: 0.24rem;
  height: 0.43rem;
  /* background: url("../../assets/img/arrow.png") no-repeat; */
  /* background-size: 100%; */
}
.goods-info {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  align-items: center;
  padding: 0.45rem 0.48rem;
}
.goods-info .pic {
  width: 1.8rem;
  height: 1.8rem;
  background-color: #8e8e8e;
  overflow: hidden;
  margin-right: 0.21rem;
}
.goods-info .pic .picItem {
  width: 1.8rem;
  height: 1.8rem;
}
.goods-info .info {
  padding: 0.18rem 0;
  margin-left: 0.21rem;
  font-size: 0.48rem;
  display: flex;
  flex-direction: row;
  width: 100%;
}
.goods-info .info .title {
  /* margin-bottom: 0.55rem; */
  max-width: 6rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.goods-info .info .sku {
  color: #666;
  font-size: 0.36rem;
}
.goods-info .info .money {
  margin-bottom: 0.05rem;
}
.goods-info .info .buyNumber {
  flex-grow: 1;
  align-self: flex-end;
  text-align: right;
}
.stage h5 {
  font-size: 0.42rem;
  height: 1.15rem;
  line-height: 1.15rem;
  color: #d11463;
  text-indent: 0.48rem;
  border-left: 0.09rem solid #d11463;
}
.stage h5 span {
  font-size: 0.36rem;
  color: #666;
  padding-left: 0.5rem;
}
.stage .list-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.36rem;
  color: #666;
  padding: 0.36rem 0.48rem;
}
.list-item .reverse-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.list-item .reverse {
  display: flex;
  flex-direction: row-reverse;
}
.list-item .text-success {
  color: #ff6e02;
}
.list-item .text-red {
  color: #d11463;
}

.text-default {
  color: #000;
}
.list-item .text-error {
  color: #941717;
}
.stage .list-item:last-child {
  color: #000;
  border-top: 0.01rem solid #e1e1e1;
}
.step-one .list-item:last-child {
  color: #d11463;
  border-top: 0.01rem solid #e1e1e1;
}
.forecast .list-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.36rem;
  padding: 0.36rem 0.48rem;
}
.orider-info {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font-size: 0.42rem;
}
.orider-money {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 1.37rem;
  padding: 0.54rem 0.47rem;
}
.orider-money .flexBox {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.18rem 0.48rem;
  border-top: 0.01rem solid #c8c7cc;
  background: #fff;
}
.footer.iPhonex {
  position: relative;
  padding-bottom: .5rem;
}
.footer .btn {
  height: 1.14rem;
}
.footer .btn-blue {
  background-color: #0000ff;
}
.footer .btn-pink {
  background-color: #d11463;
}
.footer .btn-default {
  border: solid 0.02rem #000000;
  margin-right: 0.44rem;
  background: #fff;
  color: #000;
}
/* 等待 */
.orderStatus-witing {
  background: #b71358;
}
/* 取消，关闭 */
.orderStatus-cancel {
  background: #888;
}
/* 成功 */
.orderStatus-success {
  background: #409e65;
}

/* 转卖商品窗口 */
.form-item {
  height: 1rem;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  border-bottom: 0.01rem solid #e1e1e1;
  padding-top: 0.2rem;
  font-size: 0.42rem;
}
.form-item .text {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  max-width: 3.7rem;
  overflow-x: auto;
  text-align: right;
  /* margin-right: 0.25rem; */
}
.form-item .form-input {
  padding: 0.2rem 0;
  text-align: right;
  max-width: 3.7rem;
  font-size: 0.42rem;
  background: none;
  border: none;
}
input:focus {
  outline: none;
}
.tip {
  margin-top: 0.3rem;
  margin-bottom: 0.31rem;
  font-size: 0.28rem;
  color: #d11463;
}

.edit .edit-btn {
  width: 2.19rem;
  height: 0.9rem;
  background-color: #fff;
  border: solid 1px #000;
  border-radius: 0.1rem;
  margin-right: 0.48rem;
}
.edit .edit-btn:last-child {
  margin-right: 0.6rem;
}
.edit-sub {
  width: 5.01rem;
  height: 1.08rem;
  background-color: #d11463;
  border-radius: 2rem;
  font-size: 0.54rem;
  color: #fff;
}
.cancel-info {
  margin-top: 0.63rem;
  font-size: 0.42rem;
}
.pop-footer-btns {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.pop-footer-cancel {
  width: 2.71rem;
  height: 1.08rem;
  background-color: #5062a6;
  border-radius: 2rem;
  color: #fff;
  font-size: 0.54rem;
}
.pop-footer-sub {
  width: 2.71rem;
  height: 1.08rem;
  background-color: #d11463;
  border-radius: 2rem;
  color: #fff;
  font-size: 0.54rem;
}
.explain {
  text-align: left;
}
.explain .icon-explain {
  position: relative;
  margin-right: 0.1rem;
  top: 0.05rem;
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  background: url("../../assets/img/icon-help.png") no-repeat center/contain;
  text-align: left;
}
.explain .icon-arrow {
  position: relative;
  margin-left: 0.1rem;
  top: -0.05rem;
  display: inline-block;
  width: 0.12rem;
  height: 0.08rem;
  background: url("../../assets/img/icon-arrow-down.png") no-repeat
    center/contain;
  text-align: left;
}
.explain .icon-arrow.active {
  background: url("../../assets/img/icon-arrow-up.png") no-repeat center/contain;
}
.explain .text-box .txt {
  font-size: 0.28rem;
  color: #333;
  line-height: 0.42rem;
  padding-bottom: 0.2rem;
}
.explain .text-box .href {
  color: #d11463;
  font-size: 0.32rem;
  line-height: 0.8rem;
}
.icon-code {
  /* position: relative; */
  margin-left: 0.1rem;
  display: inline-block;
  /* left: 0.03rem; */
  width: 0.36rem;
  height: 0.36rem;
  background: url("../../assets/img/wen.png") no-repeat center/contain;
  text-align: left;
}
.txt-left {
  text-align: left;
}
.color-blue {
  color: #362ace;
}
</style>
